<template>
	<view class="box">
		<view class="top" :class="{zxc:is}">
			<view class="biao">
				<img src="../../static/biao.png" alt="" @click="eee()"><span>团油</span>
			</view>
			<view class="topn">

				<view class="topn1">
					<view class="topdeng">
						<image :src="name.avatarUrl" mode=""></image>
					</view>
					<view class="you">
						<view class="topdengzi" @click="shouquan()" v-show="showw">
							<view class="bb" v-if="operation2">
								点击登录
							</view>
							<view class="bb" v-if="operation1">
								{{name.nickName}}
							</view>
						</view>
						<view class="xiazi" v-if="operation1">
							<view class="one" @click="hui()"> 注册会员</view>
							<view class="two" @click="dengs()"> 未认证私家车</view>
						</view>
					</view>


				</view>
				<view class="topn2">
					<view class="jiayoujin" @click="dengs()" v-if="operation1">
						<img src="../../static/qwe.jpg" alt="" />赚加油金>
					</view>
					<img src="../../static/kefu.png" alt="" @click="kefu()" class="tu2" />

				</view>
			</view>
		</view>
		<view class="tupian" v-if="operation1">
			<img src="../../static/qqq.jpg" alt="" @click="hui()" />
			<view class="kaitong" @click="hui()">
				立即开通
			</view>
		</view>
		<view class="ji" v-if="operation1">
			<view class="xing">
				<img src="../../static/xing.jpg" alt="" />V1<span>成长等级0/200</span>
			</view>
			<view class="xingyou" @click="dengs()">
				查看权益>
			</view>
		</view>
		<view class="middle" :class="{asd:isasd}">
			<view class="my">
				我的资产
			</view>
			<view class="biemy">
				<view class="nei">
					<p v-if="operation2">- 元</p>
					<p v-if="operation1">546</p>
					<span>加油金</span>
				</view>
				<view class="nei">
					<p v-if="operation2">- 张</p>
					<p v-if="operation1">9</p>
					<span>优惠券</span>
				</view>
				<view class="nei">
					<p v-if="operation2">- 个</p>
					<p v-if="operation1">2</p>
					<span>红包</span>
				</view>
				<view class="nei">
					<p v-if="operation2">- 滴</p>
					<p v-if="operation1">5</p>
					<span>油滴</span>
				</view>
			</view>
			<view class="xiatu" v-if="operation1">
				<view class="xiatu1">
					<img src="../../static/zuotu.jpg" alt="" @click="dengs()" />
				</view>
				<view class="xiatu1">
					<img src="../../static/youtu.jpg" alt="" @click="dengs()" />
				</view>
			</view>
		</view>
		<!-- <view class="guang">
			<img src="../../static/guang.png" alt="" @click="dengs()" />
		</view> -->
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="40">
				<view id="demo1" class="scroll-view-item_H uni-bg-red">
					<img src="../../static/guang.png" alt="" @click="dengs()" />
				</view>
			</scroll-view>
		</view>
		<view class="uni-common-pb"></view>
		<view class="chang">
			<view class="my">
				常用工具
			</view>
			<view class="biemy1">
				<view class="nei1">
					<p><img src="../../static/youjia.png" alt="" @click="dengs()" /></p>
					<span>油价预测</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/chezhu.png" alt="" @click="dengs()" /></p>
					<span>车主权益</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/lipin.png" alt="" @click="dengs()" /></p>
					<span>我的礼品</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/wode.png" alt="" @click="dengs()" /></p>
					<span>我的收藏</span>
				</view>
				<view class="nei1" @click="dengs()">
					<p><img src="../../static/woyao.png" alt="" /></p>
					<span>我要合作</span>
				</view>
			</view>
			<view class="biemy1">
				<view class="nei1">
					<p><img src="../../static/kefu2.png" alt="" @click="dengs()" /></p>
					<span>客服中心</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/gongsi.png" alt="" @click="dengs()" /></p>
					<span>公司管理</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/shezhi.png" alt="" @click="dengs()" /></p>
					<span>设置</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showw: true,
				name: {},
				operation1: false,
				operation2: true,
				isasd: true,
				is: false
			}
		},
		methods: {
			eee() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			dengs() {
				uni.navigateTo({
					url: "/pages/deng/deng"
				})
			},
			kefu() {
				uni.navigateTo({
					url: "/pages/kefu/kefu"
				})
			},
			hui() {
				uni.navigateTo({
					url: "/pages/huiyuan/huiyuan"
				})
			},
			shouquan() {
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: true,
					desc: '获取你的昵称、头像',
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: "授权成功"
						})
						this.name = res.userInfo
						if (this.name.avatarUrl != '') {
							this.operation1 = true;
							this.operation2 = false;
							this.isasd = false;
							this.is = true;
						} else {
							console.log(444);
						}

					}
				})

			},
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to right, gainsboro, white);
		border-radius: 0px 0px 30rpx 30rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
		padding: 15rpx;
		margin-bottom: 190rpx;
	}

	.zxc {
		margin-bottom: 110rpx;
	}

	.biao {
		display: flex;
		width: 50%;
		margin-top: 20rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}

	.biao span {
		display: block;
		margin-left: 29rpx;
		font-size: 35rpx;
		font-weight: 500;
	}

	.biao img {
		display: block;
		width: 40rpx;
		height: 40rpx;

	}

	.topn {
		margin-top: 50rpx;
		height: auto;
		display: flex;
		justify-content: space-between;
	}

	.topn1 {
		height: auto;
		width: 60%;
		display: flex;

	}

	.asd {
		position: absolute;
		top: 290rpx;
	}

	.topdeng {
		height: 140rpx;
		width: 32%;
		border-radius: 100%;
		background-color: white;
		background-image: url(../../static/tou.png);
		background-size: 80% 75%;
		background-repeat: no-repeat;
		background-position: 8px 5px;
	}

	.topdeng image {
		width: 100%;
		border-radius: 100rpx;

		height: 100%;
	}

	.you {
		width: 64%;
		padding-top: 45rpx;
		box-sizing: border-box;
	}

	.topdengzi {
		margin-left: 5%;
		font-size: 35rpx;
		font-weight: 900;
	}

	.xiazi {
		display: flex;
		justify-content: space-between;
		height: 30rpx;
		margin-top: 10rpx;
		line-height: 25rpx;
		width: 100%;
		/* display: none; */
		margin-left: 9rpx;
		font-size: 25rpx;
		font-weight: 200;
	}

	.one {
		width: 120rpx;
		text-align: center;
		border: black 1px solid;
		border-radius: 25rpx;
	}

	.two {
		color: gray;
		margin-left: 5rpx;
		border: gray 1px solid;
		border-radius: 25rpx;
	}

	.topn2 {
		height: 50rpx;
		width: 40%;
		margin-top: 50rpx;

	}

	.jiayoujin {
		/* display: none !important; */
		background: linear-gradient(to right, #eaecf2, #f8f9ee);
		border: 1px #f8f9ee solid;
		border-radius: 50rpx;
		float: left;
		font-size: 30rpx;
		width: 70%;
		display: flex;
		justify-content: space-around;
	}

	.jiayoujin img {
		width: 50rpx;
		height: 50rpx;
	}

	.tu2 {
		width: 18%;
		height: 100%;
		float: right;
	}

	.tupian {
		/* display: none; */
		position: absolute;
		width: 90%;
		top: 330rpx;
		left: 5%;
		margin: 0 auto;
		height: 160rpx;
	}

	.tupian img {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.kaitong {
		position: absolute;
		top: 28rpx;
		width: 150rpx;
		text-align: center;
		height: 55rpx;
		right: 3%;
		line-height: 55rpx;
		border-radius: 25rpx;
		color: #ffd6a0;
		background: linear-gradient(to right, #a75b06, #642b00);

	}

	.ji {
		/* display: none !important; */
		width: 89%;
		margin: 0 auto;
		height: 100rpx;
		background-color: white;
		border-radius: 7px;
		padding: 15rpx 15rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}


	.xing {
		border-bottom: gainsboro 5px solid;
		width: 50%;
		height: auto;
	}

	.xing span {
		font-size: 22rpx;
	}

	.xing img {
		width: 42rpx;
		height: 42rpx;
	}

	.xingyou {
		margin-top: 15rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: gray;
	}

	.middle {
		width: 90%;
		margin-top: 30rpx;
		margin-left: 5%;
		height: auto;
		background-color: white;
		border-radius: 7px;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}

	.xiatu {
		display: flex;
		/* display: none; */
		justify-content: space-between;
		height: 80rpx;
		margin-top: 10rpx;
		padding: 10rpx;
	}

	.xiatu1 {
		width: 49%;
		border-radius: 15rpx;
		height: 100%;

	}

	.xiatu1 img {
		border-radius: 15rpx;
		width: 100%;
		height: 100%;
	}


	.my {
		font-size: 35rpx;
	}

	.biemy {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

	}

	.biemy1 {
		margin-top: 30rpx;
	}

	.biemy1 p {
		text-align: center;
	}

	.biemy1 p img {
		width: 60rpx;
		height: 60rpx;
	}

	.nei {
		text-align: left;
		line-height: 50rpx;
	}

	.nei1 {
		margin-bottom: 30rpx;
		line-height: 35rpx;
		float: left;
		margin-left: 25rpx;
	}

	.nei1 span {
		font-size: 25rpx;
	}

	.nei span {
		font-size: 28rpx;
	}

	.scroll-view_H {
		margin-top: 30rpx;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		width: 120%;
		text-align: center;
		height: 190rpx;
		line-height: 190rpx;
	}

	.scroll-view-item_H img {
		text-align: center;
		width: 75%;
		margin: 0 auto;
		height: 100%;
	}

	.chang {
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		height: 350rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 18rpx;
		background-color: white;
	}
</style>
